<template>
  <scroll-dialog
    ref="dialogRef"
    title="修改价格"
    :dialogVisible="diaLogVisible"
    @clickSubmit="clickSubmit"
    @close="close"
  >
    <div class="content-radio">
      <el-radio-group v-model="radio1" @change="changeRadio(1)">
        <el-radio label="1" size="large">直接修改价格：设置统一价格</el-radio>
      </el-radio-group>
      <el-input v-if="radio1" v-number:2 v-model="flatPrice"></el-input>
      <span v-if="radio1">元</span>
    </div>

    <div class="content-radio">
      <el-radio-group v-model="radio2" @change="changeRadio(2)">
        <el-radio label="1" size="large">运用统一公式修改价格</el-radio>
      </el-radio-group>
      <span v-if="radio2">
        <el-select v-model="priceValueAction" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="priceValue"
          v-number:2
          placeholder="两位小数"
        ></el-input>
        元。 价格自动抹零
        <el-switch v-model="switch1" />
      </span>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="商品名称" />
      <el-table-column prop="prePrice" label="原价">
        <template #default="scope">{{ scope.row.prePrice / 100 }}元</template>
      </el-table-column>
      <el-table-column prop="nextPrice" label="修改后的价格">
        <template #default="scope">{{ scope.row.nextPrice / 100 }}元</template>
      </el-table-column>
    </el-table>
  </scroll-dialog>
</template>
<script lang="ts" setup>
  import ScrollDialog from '@/components/ScrollDialog/index.vue'
  import { ref, onMounted, watch } from 'vue'
  import { computed } from '@vue/reactivity'
  import { goodsModifyPrice } from '@/api/modules/shop'
  import common from '@/utils/common'

  const props = defineProps({
    diaLogVisible: {
      type: Boolean,
      default: false,
    },
    dataType: {
      type: Number,
      // 1 商品分类
      default: 1,
    },
    selItems: {
      type: Array,
      default() {
        return []
      },
    },
  })

  const emits = defineEmits([
    // 'update:modelValue',
    'addSuccess',
    'update:diaLogVisible',
  ])
  const radio1 = ref(false)
  const radio2 = ref(false)
  const switch1 = ref(false)

  // 统一价格
  const flatPrice = ref()
  const priceValue = ref()
  const priceValueAction = ref('加')
  const options = ref([
    { value: '加', label: '加' },
    { value: '减', label: '减' },
    { value: '乘', label: '乘' },
    { value: '除', label: '除' },
  ])

  function changeRadio(type: number) {
    if (type === 1) {
      radio2.value = false
      priceValue.value = null
      switch1.value = false
    } else if (type === 2) {
      radio1.value = false
      flatPrice.value = null
    }
  }

  function clickSubmit() {
    // 确定 提交接口。判断是否有负数、
    const item: any = {
      operator: radio1.value ? '' : priceValueAction.value,
      rounding: switch1.value,
      number: radio1.value ? flatPrice.value * 100 : priceValue.value * 100,
      spuIds: tableData.value.map((item) => item.id),
    }

    common.XmLoading(true)
    goodsModifyPrice(item)
      .then((res) => {
        common.XmLoading()
        emits('update:diaLogVisible', false)
        emits('addSuccess', res.data)
      })
      .catch(() => {
        common.XmLoading()
      })
  }

  function close() {
    flatPrice.value = null
    priceValue.value = null
    priceValueAction.value = '加'
    radio1.value = false
    radio2.value = false
    switch1.value = false
    emits('update:diaLogVisible', false)
  }

  // const tableData = ref([])
  const tableData = computed(() => {
    return props.selItems?.map((e: any) => {
      const price = e.price
      const item = { priceValue: e.price }
      if (radio1.value && flatPrice.value) {
        item.priceValue = flatPrice.value * 100
      } else if (radio2.value && priceValue.value && priceValueAction.value) {
        switch (priceValueAction.value) {
          case '加':
            item.priceValue = price + parseFloat(priceValue.value) * 100
            break
          case '减':
            item.priceValue = price - parseFloat(priceValue.value) * 100
            break
          case '乘':
            item.priceValue = price * parseFloat(priceValue.value)
            break
          case '除':
            item.priceValue = price / parseFloat(priceValue.value)
        }
        // 抹零 向下取整
        if (switch1.value) {
          item.priceValue = Math.floor(item.priceValue / 100) * 100
        }
      }
      return {
        nextPrice: item.priceValue,
        prePrice: e.price,
        name: e.title,
        id: e.id,
      }
    })
  })

  // function flatPriceChange() {

  // }
</script>

<style lang="scss" scoped>
  .content-radio {
    display: flex;
    align-items: center;
    :deep(.el-radio-group) {
      // margin-bottom: 10px;
    }
    :deep(.el-input) {
      width: 100px;
      margin-left: 10px;
    }
  }
</style>
